<template>
  <div>
    <el-form class="form-container" :model="points" ref="points" :rules="rules" label-width="220px"
             style="font-size:14px;" v-loading="formLoading">
      <!-- <el-form-item  label="开启积分功能:">
        <el-switch v-model="points.enablePoints"></el-switch>
      </el-form-item> -->
      <div class="boder-bottom"></div>

      <!-- <el-form-item label="1元等于多少积分:" prop="rmb2Points">
        <el-input v-model="points.rmb2Points" auto-complete="off" placeholder="请输入积分" style="width: 800px"></el-input>
      </el-form-item> -->
      <el-form-item label="分享注册获得欧币:" prop="pointsOnRegistration">
        <el-input v-model="points.pointsOnRegistration" auto-complete="off" placeholder="请输入"
                  style="width: 800px"></el-input>
      </el-form-item>
      <!-- <div class="boder-bottom"></div> -->

      <!-- <el-form-item label="分享文章获得积分:" prop="pointsOnSharingArticle">
        <el-input v-model="points.pointsOnSharingArticle" placeholder="请输入" style="width: 800px"></el-input>
      </el-form-item>
      <el-form-item label="分享视频获得积分:" prop="pointsOnSharingVideo">
        <el-input v-model="points.pointsOnSharingVideo" placeholder="请输入" style="width: 800px"></el-input>
      </el-form-item>
      <el-form-item label="分享音频获得积分:" prop="pointsOnSharingAudio">
        <el-input v-model="points.pointsOnSharingAudio" placeholder="请输入" style="width: 800px"></el-input>
      </el-form-item>
      <el-form-item label="观看视频获得积分(每分钟):" prop="pointsOnBuyingVideo">
        <el-input v-model="points.pointsOnBuyingVideo" placeholder="请输入" style="width: 800px"></el-input>
      </el-form-item>
      <el-form-item label="观看音频获得积分(每分钟):" prop="pointsOnBuyingAudio">
        <el-input v-model="points.pointsOnBuyingAudio" placeholder="请输入" style="width: 800px"></el-input>
      </el-form-item> -->

      <!-- <div class="boder-bottom"></div>

      <el-form-item label="签到获得积分:" prop="pointsOnCheckingIn">
        <el-input v-model="points.pointsOnCheckingIn" placeholder="请输入" style="width: 800px"></el-input>
      </el-form-item>
      <el-form-item label="连续签到周期(几天):" prop="checkInPeriod">
        <el-input v-model="points.checkInPeriod" placeholder="请输入" style="width: 800px"></el-input>
      </el-form-item>
      <el-form-item label="连续签到可获得积分:" prop="pointsOnPeriodicCheckIn">
        <el-input v-model="points.pointsOnPeriodicCheckIn" placeholder="请输入" style="width: 800px"></el-input>
      </el-form-item>
      <div class="boder-bottom"></div> -->

      <!-- <el-form-item>
        <code style="width:800px;">
          <svg-icon icon-class="message" style="margin-right:10px;color:red;font-size:20px;"></svg-icon>
          注意：如果开启了分享视音频获取积分，则分享视音频免费收看功能自动失效
        </code>
      </el-form-item> -->

      <p v-if="permission == 3" style="text-align: center;">
        <el-button type="primary" v-loading="btnLoading" icon="el-icon-check" @click="submitForm">保存</el-button>
      </p>
    </el-form>
  </div>
</template>
<script>
  import { getPoints, PointSave } from '@/api/member'
  import { marketing_point } from '@/utils/permission'
  const validatePoints = (rule, value, callback) => {
    console.log(value)
    if (value && isNaN(value) || Number(value) < 0) {
      callback('请输入正确的积分数值,不能为负数')
    } else {
      callback()
    }
  }

  const rules = {
    rmb2Points: [{ required: true, trigger: 'blur', validator: validatePoints }],
    pointsOnRegistration: [{ required: true, trigger: 'blur', validator: validatePoints }],
    pointsOnSharingArticle: [{ trigger: 'blur', validator: validatePoints }],
    pointsOnSharingVideo: [{ trigger: 'blur', validator: validatePoints }],
    pointsOnSharingAudio: [{ trigger: 'blur', validator: validatePoints }],
    pointsOnBuyingVideo: [{ trigger: 'blur', validator: validatePoints }],
    pointsOnBuyingAudio: [{ trigger: 'blur', validator: validatePoints }],
    pointsOnCheckingIn: [{ trigger: 'blur', validator: validatePoints }],
    checkInPeriod: [{ trigger: 'blur', validator: validatePoints }],
    pointsOnPeriodicCheckIn: [{ trigger: 'blur', validator: validatePoints }]
    // rmb2Points: [{ required: true, message: '1元等于多少积分不能为空' },
    //   { type: 'number', message: '积分必须为数字值' }]
  }
  export default {
    data() {
      return {
        btnLoading: false,
      	formLoading: false,
        permission: 3,
        points: {
          companyId: null,
          enablePoints: true,
          rmb2Points: null, // 1元等于多少积分
          pointsOnRegistration: null, // 分享注册获得积分
          pointsOnSharingArticle: null, // 分享文章获得积分
          pointsOnSharingVideo: null, // 分享视频获得积分
          pointsOnSharingAudio: null, // 分享音频获得积分
          pointsOnBuyingVideo: null, // 观看视频获得积分(每分钟)
          pointsOnBuyingAudio: null, // 观看音频获得积分(每分钟)
          pointsOnCheckingIn: null, // 签到获得积分
          checkInPeriod: null, // 连续签到周期(几天)
          pointsOnPeriodicCheckIn: null // 连续签到可获得积分
        },
        rules
      }
    },
    created() {
      this.getModelPermission()
      this.getPoints()
    },
    methods: {
      getModelPermission() {
        this.permission = marketing_point()
      },
      getPoints() {
      	this.formLoading = true
        getPoints().then(res => {
        	this.formLoading = false
          console.log(res)
          if (res.data.data) {
            this.points = res.data.data
            this.points.enablePoints = res.data.data.enablePoints == 1
          }
        }).catch(err => {
        	this.formLoading = false
          console.log(err)
        })
      },
      submitForm() {
        this.$refs.points.validate((valid) => {
          if (valid) {
            if (this.btnLoading) {
              return
            }
            this.btnLoading = true
            var data = { data: this.points }
            this.formLoading = true
            PointSave(data).then(res => {
            	this.formLoading = false
              this.btnLoading = false
              this.$message({
                type: 'success',
                message: '保存成功！'
              })
            }).catch(err => {
            	this.formLoading = false
              this.btnLoading = false
              console.log(err)
            })
          } else {
            this.$message({
              type: 'error',
              message: '内容填写有误，请正确填写'
            })
          }
        })
      }
    }
  }
</script>
<style scoped>
  .boder-bottom {
    width: 100%;
    height: 1px;
    border-bottom: 1px solid #eee;
    margin-bottom: 20px;
  }
</style>
